<template>
  <div>
    <a-modal
        :destroyOnClose="true"
        :visible="this.popupVisible"
        :title="this.popupTitle"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            label="策略名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['label', {
                                rules: [{ required: true, message: '请输入策略名！' }],
                                initialValue: this.editData && this.editData.label
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="备注"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['comment', {
                                initialValue: this.editData && this.editData.comment
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="警戒值"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input-number
              :min="1"
              v-decorator="['median', {
                                rules: [{ required: true, message: '请输入警戒值！' }],
                                initialValue: this.editData && this.editData.median
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="拒绝值"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input-number
              :min="1"
              v-decorator="['high', {
                                rules: [{ required: true, message: '请输入拒绝值！' }],
                                initialValue: this.editData && this.editData.high
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "ActivationPopup",
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  computed: {
    ...mapState('activation', ['popupVisible', 'popupTitle', 'editData']),
  },
  methods: {
    ...mapActions('activation', ['addActivation', 'queryAllActivation', 'update']),
    ...mapMutations('activation', ['setState']),
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.popupTitle == '添加') {
            this.addActivation(values).then(() => {
              this.queryAllActivation()
            })
          } else {
            this.update(values).then(() => {
              this.queryAllActivation()
            })
          }
          this.setState({name: 'popupVisible', value: false})
        }
      })
    },
    handleCancel() {
      this.setState({name: 'popupVisible', value: false})
    }
  }
}
</script>

<style scoped>

</style>
